<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>雁农冷链平台 - 数据概览</title>
    <link rel="stylesheet" href="static/sa.css" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            background: #f5f7fa;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header h1 {
            margin: 0;
            font-size: 1.8em;
            font-weight: 300;
        }
        .header .nav-links {
            display: flex;
            gap: 20px;
        }
        .header .nav-links a {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 20px;
            transition: background 0.3s;
        }
        .header .nav-links a:hover {
            background: rgba(255,255,255,0.2);
        }
        .container {
            padding: 20px 40px;
            max-width: 1400px;
            margin: 0 auto;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: transform 0.2s;
        }
        .stat-card:hover {
            transform: translateY(-2px);
        }
        .stat-card .icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 15px;
        }
        .stat-card .number {
            font-size: 2.2em;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        .stat-card .label {
            color: #666;
            font-size: 0.9em;
        }
        .stat-card .change {
            margin-top: 10px;
            font-size: 0.85em;
        }
        .positive { color: #52c41a; }
        .negative { color: #ff4d4f; }
        .icon-blue { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
        .icon-green { background: linear-gradient(135deg, #56ab2f, #a8e6cf); color: white; }
        .icon-orange { background: linear-gradient(135deg, #f093fb, #f5576c); color: white; }
        .icon-purple { background: linear-gradient(135deg, #4facfe, #00f2fe); color: white; }
        .chart-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        .chart-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .chart-title {
            font-size: 1.3em;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .chart {
            width: 100%;
            height: 350px;
        }
        .bottom-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .trace-flow {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .flow-steps {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        .flow-step {
            text-align: center;
            position: relative;
            flex: 1;
        }
        .flow-step .step-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
        }
        .flow-step .step-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .flow-step .step-desc {
            font-size: 0.85em;
            color: #666;
        }
        .flow-step:not(:last-child)::after {
            content: '→';
            position: absolute;
            right: -15px;
            top: 30px;
            color: #ccc;
            font-size: 20px;
        }
        .step-1 .step-icon { background: linear-gradient(135deg, #ff6b6b, #ee5a24); }
        .step-2 .step-icon { background: linear-gradient(135deg, #4ecdc4, #44a08d); }
        .step-3 .step-icon { background: linear-gradient(135deg, #667eea, #764ba2); }
        .step-4 .step-icon { background: linear-gradient(135deg, #feca57, #ff9ff3); }
        .step-5 .step-icon { background: linear-gradient(135deg, #48dbfb, #0abde3); }
        .recent-activity {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        .activity-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f0f2f5;
        }
        .activity-item:last-child {
            border-bottom: none;
        }
        .activity-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 16px;
            color: white;
        }
        .activity-content {
            flex: 1;
        }
        .activity-title {
            font-weight: 500;
            color: #333;
            margin-bottom: 3px;
        }
        .activity-time {
            font-size: 0.8em;
            color: #999;
        }
        @media (max-width: 768px) {
            .container {
                padding: 15px 20px;
            }
            .header {
                padding: 15px 20px;
            }
            .chart-grid {
                grid-template-columns: 1fr;
            }
            .bottom-grid {
                grid-template-columns: 1fr;
            }
            .flow-steps {
                flex-direction: column;
                gap: 20px;
            }
            .flow-step:not(:last-child)::after {
                content: '↓';
                position: static;
                margin: 10px 0;
            }
        }
    </style>
</head>
<body>
    <!-- 头部导航 -->
    <div class="header">
        <h1>🦆 雁农冷链平台</h1>
        <div class="nav-links">
            <a href="login.html">登录</a>
            <a href="#about">关于我们</a>
            <a href="#services">服务介绍</a>
        </div>
    </div>

    <div class="container">
        <!-- 统计卡片 -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="icon icon-blue">📦</div>
                <div class="number">50,000+</div>
                <div class="label">优质商品</div>
                <div class="change positive">全程溯源保障</div>
            </div>
            <div class="stat-card">
                <div class="icon icon-green">🔍</div>
                <div class="number">1,000,000+</div>
                <div class="label">用户信赖</div>
                <div class="change positive">安全可靠的选择</div>
            </div>
            <div class="stat-card">
                <div class="icon icon-orange">🚛</div>
                <div class="number">365天</div>
                <div class="label">冷链运输</div>
                <div class="change positive">全年无休服务</div>
            </div>
            <div class="stat-card">
                <div class="icon icon-purple">📊</div>
                <div class="number">99.9%</div>
                <div class="label">新鲜度</div>
                <div class="change positive">品质承诺</div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="chart-grid">
            <div class="chart-card">
                <div class="chart-title">
                    📊 平台服务增长趋势
                </div>
                <div id="traceChart" class="chart"></div>
            </div>
            <div class="chart-card">
                <div class="chart-title">
                    🍜 热门商品分类
                </div>
                <div id="categoryChart" class="chart"></div>
            </div>
        </div>

        <!-- 底部区域 -->
        <div class="bottom-grid">
            <!-- 冷链流程介绍 -->
            <div class="trace-flow">
                <div class="chart-title">
                    🔍 冷链食品安全流程
                </div>
                <div class="flow-steps">
                    <div class="flow-step step-1">
                        <div class="step-icon">🌱</div>
                        <div class="step-title">原产地</div>
                        <div class="step-desc">源头品质保障</div>
                    </div>
                    <div class="flow-step step-2">
                        <div class="step-icon">🏭</div>
                        <div class="step-title">加工处理</div>
                        <div class="step-desc">严格质量检测</div>
                    </div>
                    <div class="flow-step step-3">
                        <div class="step-icon">🚛</div>
                        <div class="step-title">冷链运输</div>
                        <div class="step-desc">全程温度控制</div>
                    </div>
                    <div class="flow-step step-4">
                        <div class="step-icon">🏢</div>
                        <div class="step-title">仓储管理</div>
                        <div class="step-desc">智能库存管理</div>
                    </div>
                    <div class="flow-step step-5">
                        <div class="step-icon">🛍</div>
                        <div class="step-title">送达您手</div>
                        <div class="step-desc">新鲜安全</div>
                    </div>
                </div>
            </div>

            <!-- 平台亮点 -->
            <div class="recent-activity">
                <div class="chart-title">
                    ✨ 平台亮点
                </div>
                <div class="activity-item">
                    <div class="activity-icon" style="background: #52c41a;">🔍</div>
                    <div class="activity-content">
                        <div class="activity-title">全程可追溯，吃得放心</div>
                        <div class="activity-time">扫码即可查看食品来源</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon" style="background: #1890ff;">🌡</div>
                    <div class="activity-content">
                        <div class="activity-title">智能温度监控，品质保障</div>
                        <div class="activity-time">全程冷链运输，保持新鲜</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon" style="background: #fa8c16;">🚚</div>
                    <div class="activity-content">
                        <div class="activity-title">快速配送，及时到达</div>
                        <div class="activity-time">专业冷链车队，全城配送</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon" style="background: #722ed1;">📞</div>
                    <div class="activity-content">
                        <div class="activity-title">客服在线，贴心服务</div>
                        <div class="activity-time">24小时在线服务，随时咨询</div>
                    </div>
                </div>
                <div class="activity-item">
                    <div class="activity-icon" style="background: #eb2f96;">🏆</div>
                    <div class="activity-content">
                        <div class="activity-title">品质优良，荣获认证</div>
                        <div class="activity-time">多项质量认证，值得信赖</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 服务介绍区域 -->
        <div id="services" class="chart-card" style="margin-bottom: 30px;">
            <div class="chart-title">
                🎆 我们的服务
            </div>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px;">
                <div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 10px;">
                    <div style="font-size: 48px; margin-bottom: 15px;">👥</div>
                    <h3 style="color: #333; margin-bottom: 10px;">消费者服务</h3>
                    <p style="color: #666; line-height: 1.6;">提供新鲜食品购买、商品溯源查询、订单跟踪等一站式服务，让您吃得放心、买得放心。</p>
                    <button onclick="window.location.href='index-consumer.html'" style="margin-top: 15px; padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 20px; cursor: pointer;">进入服务</button>
                </div>
                <div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 10px;">
                    <div style="font-size: 48px; margin-bottom: 15px;">🏭</div>
                    <h3 style="color: #333; margin-bottom: 10px;">供应商服务</h3>
                    <p style="color: #666; line-height: 1.6;">为供应商提供产品发布、库存管理、订单处理、物流跟踪等全方位管理工具。</p>
                    <button onclick="window.location.href='index-supplier.html'" style="margin-top: 15px; padding: 10px 20px; background: #52c41a; color: white; border: none; border-radius: 20px; cursor: pointer;">进入服务</button>
                </div>
                <div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 10px;">
                    <div style="font-size: 48px; margin-bottom: 15px;">🚛</div>
                    <h3 style="color: #333; margin-bottom: 10px;">冷链企业服务</h3>
                    <p style="color: #666; line-height: 1.6;">专业的冷链物流管理系统，包括运输调度、温度监控、车队管理等专业功能。</p>
                    <button onclick="window.location.href='index-logistics.html'" style="margin-top: 15px; padding: 10px 20px; background: #fa8c16; color: white; border: none; border-radius: 20px; cursor: pointer;">进入服务</button>
                </div>
            </div>
        </div>

        <!-- 关于我们区域 -->
        <div id="about" class="chart-card">
            <div class="chart-title">
                🏢 关于雁农冷链
            </div>
            <div style="line-height: 1.8; color: #666; font-size: 16px;">
                <p style="margin-bottom: 20px;">
                    雁农冷链平台是一个专业的冷链物流管理平台，致力于为所有用户提供安全、高效、可靠的冷链食品服务。
                    我们通过先进的技术和严格的管理，确保每一件产品都能在最佳状态下送达到您的手中。
                </p>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px;">
                    <div style="text-align: center;">
                        <div style="font-size: 32px; margin-bottom: 10px;">🌱</div>
                        <h4 style="color: #333; margin-bottom: 8px;">绿色健康</h4>
                        <p style="font-size: 14px; color: #999;">坚持绿色可持续发展，为您提供健康食品</p>
                    </div>
                    <div style="text-align: center;">
                        <div style="font-size: 32px; margin-bottom: 10px;">🔒</div>
                        <h4 style="color: #333; margin-bottom: 8px;">安全可靠</h4>
                        <p style="font-size: 14px; color: #999;">从源头到餐桌，全程可追溯，保障食品安全</p>
                    </div>
                    <div style="text-align: center;">
                        <div style="font-size: 32px; margin-bottom: 10px;">⚡</div>
                        <h4 style="color: #333; margin-bottom: 8px;">高效便民</h4>
                        <p style="font-size: 14px; color: #999;">智能化管理系统，提供便民高效的服务体验</p>
                    </div>
                    <div style="text-align: center;">
                        <div style="font-size: 32px; margin-bottom: 10px;">🎆</div>
                        <h4 style="color: #333; margin-bottom: 8px;">专业品质</h4>
                        <p style="font-size: 14px; color: #999;">专业的冷链技术团队，为您提供专业服务</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化平台服务增长趋势图
        var traceChart = echarts.init(document.getElementById('traceChart'));
        var traceOption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['用户注册', '商品上架', '订单成交']
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '用户注册',
                    type: 'line',
                    smooth: true,
                    itemStyle: { color: '#667eea' },
                    data: [1200, 1500, 1800, 2200, 2500, 2800]
                },
                {
                    name: '商品上架',
                    type: 'line',
                    smooth: true,
                    itemStyle: { color: '#764ba2' },
                    data: [800, 1200, 1500, 1800, 2100, 2400]
                },
                {
                    name: '订单成交',
                    type: 'line',
                    smooth: true,
                    itemStyle: { color: '#52c41a' },
                    data: [3000, 4200, 5100, 6800, 7500, 8900]
                }
            ]
        };
        traceChart.setOption(traceOption);

        // 初始化热门商品分类图
        var categoryChart = echarts.init(document.getElementById('categoryChart'));
        var categoryOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: ['生鲜蔬菜', '冷冻肉类', '水产品', '乳制品', '其他']
            },
            series: [
                {
                    name: '热门商品',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '50%'],
                    data: [
                        { value: 4520, name: '生鲜蔬菜', itemStyle: { color: '#67c23a' } },
                        { value: 3680, name: '冷冻肉类', itemStyle: { color: '#e6a23c' } },
                        { value: 2890, name: '水产品', itemStyle: { color: '#409eff' } },
                        { value: 1950, name: '乳制品', itemStyle: { color: '#909399' } },
                        { value: 1280, name: '其他', itemStyle: { color: '#f56c6c' } }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        categoryChart.setOption(categoryOption);

        // 窗口大小变化时重新绘制图表
        window.addEventListener('resize', function() {
            traceChart.resize();
            categoryChart.resize();
        });

        // 模拟实时数据更新
        setInterval(function() {
            var statCards = document.querySelectorAll('.stat-card .number');
            statCards.forEach(function(card, index) {
                if (index === 1) { // 用户信赖数
                    var currentText = card.textContent;
                    if (currentText.includes('+')) {
                        var currentValue = parseInt(currentText.replace(/[^0-9]/g, ''));
                        var newValue = currentValue + Math.floor(Math.random() * 100) + 1;
                        card.textContent = newValue.toLocaleString() + '+';
                    }
                }
            });
        }, 8000);
    </script>
</body>
</html>